<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content">
			<h3>面板风格-1</h3>
			<div class="row">
				<div class="col-sm-3">
					<div class="box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title">折叠面板（默认）</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                        <!-- /.box-tools -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <code>.box-default</code>
                    </div>
                    <!-- /.box-body -->
                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-success">
	                    <div class="box-header with-border">
	                        <h3 class="box-title">可移除面板</h3>
	                        <div class="box-tools pull-right">
	                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
	                        </div>
	                        <!-- /.box-tools -->
	                    </div>
	                    <!-- /.box-header -->
	                    <div class="box-body">
	                        <code>.box-success</code>
	                    </div>
	                    <!-- /.box-body -->
	                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-warning">
	                    <div class="box-header with-border">
	                        <h3 class="box-title">折叠面板</h3>
	                        <div class="box-tools pull-right">
	                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
	                                <i class="fa fa-minus"></i>
	                            </button>
	                        </div>
	                        <!-- /.box-tools -->
	                    </div>
	                    <!-- /.box-header -->
	                    <div class="box-body" style="display: block;">
	                        <code>.box-warning</code>
	                    </div>
	                    <!-- /.box-body -->
	                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-danger">
	                    <div class="box-header">
	                        <h3 class="box-title">加载中...</h3>
	                    </div>
	                    <div class="box-body">
	                        <code>.box-danger</code>
	                    </div>
	                    <!-- /.box-body -->
	                    <!-- Loading (remove the following to stop the loading)-->
	                    <div class="overlay">
	                        <i class="fa fa-spinner fa-spin"></i>
	                    </div>
	                    <!-- end loading -->
	                </div>
				</div>
			</div>
			<h3>面板风格-2</h3>
			<div class="row">
				<div class="col-sm-3">
					<div class="box box-default box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">折叠面板（默认）</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                        <!-- /.box-tools -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <code>.box-default</code>
                    </div>
                    <!-- /.box-body -->
                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-success box-solid">
	                    <div class="box-header with-border">
	                        <h3 class="box-title">可移除面板</h3>
	                        <div class="box-tools pull-right">
	                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
	                        </div>
	                        <!-- /.box-tools -->
	                    </div>
	                    <!-- /.box-header -->
	                    <div class="box-body">
	                        <code>.box-success</code>
	                    </div>
	                    <!-- /.box-body -->
	                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-warning box-solid">
	                    <div class="box-header with-border">
	                        <h3 class="box-title">折叠面板</h3>
	                        <div class="box-tools pull-right">
	                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
	                                <i class="fa fa-minus"></i>
	                            </button>
	                        </div>
	                        <!-- /.box-tools -->
	                    </div>
	                    <!-- /.box-header -->
	                    <div class="box-body" style="display: block;">
	                        <code>.box-warning</code>
	                    </div>
	                    <!-- /.box-body -->
	                </div>
				</div>
				<div class="col-sm-3">
					<div class="box box-danger box-solid">
	                    <div class="box-header">
	                        <h3 class="box-title">加载中...</h3>
	                    </div>
	                    <div class="box-body">
	                        <code>.box-danger</code>
	                    </div>
	                    <!-- /.box-body -->
	                    <!-- Loading (remove the following to stop the loading)-->
	                    <div class="overlay">
	                        <i class="fa fa-spinner fa-spin"></i>
	                    </div>
	                    <!-- end loading -->
	                </div>
				</div>
			</div>
			<h3>其他面板组件</h3>
			<div class="row">
				<div class="col-sm-4">
					<div class="small-box bg-aqua">
	                    <div class="inner">
	                        <h3>背景色可选</h3>
	                        <p><code>.bg-aqua</code> <code>.bg-yellow</code> <code>.bg-green</code> <code>.bg-red</code></p>
	                    </div>
	                    <div class="icon">
	                        <i class="fa fa-shopping-cart"></i>
	                    </div>
	                    <a href="#" class="small-box-footer">
	                        	图标可选 <i class="fa fa-arrow-circle-right"></i>
	                    </a>
	                </div>
				</div>
				<div class="col-sm-4">
					<div class="info-box bg-green">
	                    <span class="info-box-icon"><i class="fa fa-money"></i></span>
	                    <div class="info-box-content">
	                        <span class="info-box-text">收益提醒</span>
	                        <span class="info-box-number">$ 41,410</span>
	                        <div class="progress">
	                            <div class="progress-bar" style="width: 70%"></div>
	                        </div>
	                        <span class="progress-description">
	                            	本月收益上升 70% 
	                        </span>
	                    </div>
	                    <!-- /.info-box-content -->
	                </div>
				</div>
				<div class="col-sm-4">
					<div class="info-box">
	                    <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
	                    <div class="info-box-content">
	                        <span class="info-box-text">收益提醒</span>
	                        <span class="info-box-number">$ 41,410</span>
	                    </div>
	                    <!-- /.info-box-content -->
	                </div>
				</div>
			</div>
			<h3>面板嵌套</h3>
			<div class="box box-default box-solid">
				<div class="box-header">
					面板1
				</div>
				<div class="box-body">
					<div class="box box-default box-solid">
						<div class="box-header">
							面板2
						</div>
						<div class="box-body">
							<div class="box box-default box-solid">
								<div class="box-header">
									面板4
								</div>
								<div class="box-body">
									
								</div>
							</div>
						</div>
					</div>
					<div class="box box-default box-solid">
						<div class="box-header">
							面板3
						</div>
						<div class="box-body">
							
						</div>
					</div>
				</div>
			</div>
			<h3>面板遮罩-双层面板 </h3>
			<div class="box box-default direct-chat box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-tv"></i>&nbsp;演示双面板</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-widget="chat-pane-toggle">
                            <i class="fa fa-exchange"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body no-padding">
                	<div class="direct-chat-messages">这是第一个面板</div>
                	<div class="direct-chat-contacts bg-black-gradient">
                        这是第二个面板
                    </div>
                </div>
			</div>
		</section>
		<script src="../../dist/js/jquery.min.js"></script>
    	<script src="../../dist/js/lanai-ui.min.js"></script>
	</body>
</html>
